<template>
    <div class="checkAssets">
        <div class="index-head">
            <div class="left">
                <div class="title">
                    <i class="icon fl"></i>
                    <ul class="fr">
                        <li class="bold">固定资产</li>
                        <li>深圳辰尔科技有限公司</li>
                    </ul>
                </div>
                <div class="search">
                    <label>
                        <input type="text"
                               placeholder="固定资产名称"
                               v-model="searchParam">
                    </label>
                    <i class="icon" @click="search"></i>
                </div>
            </div>
            <ul class="right fr">
                <li class="fl">
                    <pCircle :all="assetPro.all" :show="assetPro.show" :color="assetPro.color"></pCircle>
                    <p class="title tc">固定资产总量</p>
                </li>
                <li class="fl">
                    <pCircle :all="bandLabelPro.all" :show="bandLabelPro.show" :color="bandLabelPro.color"></pCircle>
                    <p class="title tc">绑定电子标签数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="unBandLabelPro.all" :show="unBandLabelPro.show"
                             :color="unBandLabelPro.color"></pCircle>
                    <p class="title tc">未绑定电子标签数量</p>
                </li>
                <li class="fl">
                    <pCircle :all="warnPro.all" :show="warnPro.show" :color="warnPro.color"></pCircle>
                    <p class="title tc">开启报警数量</p>
                </li>
            </ul>
        </div>
        <div class="index-body">
            <p class="btns">
                <el-button round @click="batchDel">批量删除</el-button>
                <el-button round>批量导出</el-button>
            </p>
            <el-table
                :data="tableData"
                style="width: 100%;"
                @selection-change="handleSelectionChange"
                :max-height="tableH">
                <el-table-column
                    type="selection">
                </el-table-column>
                <el-table-column
                    class-name="red"
                    prop="name"
                    label="固定资产名称">
                </el-table-column>
                <el-table-column
                    class-name="orange"
                    prop="id"
                    label="固定资产编号">
                </el-table-column>
                <el-table-column
                    prop="tagId"
                    label="绑定电子标签">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="areaName"
                    label="所在区域">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="alarmSwitch"
                    label="报警开关">
                    <template slot-scope="scope">
                        <el-switch
                            @change="alarmSwitch(scope.row)"
                            v-model="scope.row.alarmSwitch"
                            active-color="#0CB5F6"
                            inactive-color="#999999">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    sortable
                    prop="personLiable"
                    label="责任人">
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注">
                </el-table-column>
                <el-table-column
                    sortable
                    prop="updateTime"
                    label="修改日期">
                </el-table-column>
                <el-table-column
                    width="180"
                    label="操作">
                    <template slot-scope="scope">
                        <el-dropdown @command="getCommand">
                            <el-button
                                size="small">
                                转移
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <span class="title">请在系统转以后尽快完成实地转移!</span>
                                <el-dropdown-item :command="item.areaId"
                                                  v-for="(item,index) in areaList"
                                                  :key="index"
                                                  @click.native="transferHandle(scope.row)">{{item.areaName}}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <el-button
                            @click.native.prevent="update(scope.row)"
                            size="small">
                            修改
                        </el-button>
                        <el-button
                            @click.native.prevent="deleteRow(scope.$index, tableData)"
                            size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--修改组件-->
            <el-dialog
                title="修改信息"
                :visible.sync="updateVisible"
                width="30%">
                <div class="content">
                    <ul>
                        <li>
                            <label>
                                <input type="text" placeholder="名称" v-model="updateForm.name">
                            </label>
                        </li>
                        <li>
                            <label>
                                <input type="text" placeholder="电子标签" v-model="updateForm.tagId">
                            </label>
                        </li>
                        <li>
                            <label>
                                <input type="text" placeholder="责任人" v-model="updateForm.personLiable">
                            </label>
                        </li>
                        <li>
                            <label>
                                <input type="text" placeholder="备注" v-model="updateForm.remark">
                            </label>
                        </li>
                    </ul>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" class="dialog-big-button" @click="updateConfirm">确 定</el-button>
                </span>
            </el-dialog>
            <!--分页组件-->
            <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :page-size="pagSize"
                :total="pagTotal">
            </el-pagination>
            <p class="pagination">
                每页显示
                <select @change="pageSizeChange" v-model="pageSize">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                条
            </p>
        </div>
    </div>
</template>

<script>
    import pCircle from '@/components/progressCircle'

    export default {
        name: "checkAssets",
        components: {
            pCircle,
        },
        data() {
            return {
                tableData: [],
                multipleSelection: [],//选中的所有数据
                areaList: [],
                updateVisible: false,
                searchParam: '',
                // 分页组件total
                pagTotal: 1,// 初始化总的数据数
                pageSize: 10, // 每页显示的值
                pagSize: 10, // 传入分页组件每页显示的值
                // 固定资产总量进度条参数
                assetPro: {
                    all: 0,
                    show: 0,
                    color: '#FF3F30'
                },
                // 绑定电子标签数量进度条参数
                bandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#FF910C'
                },
                // 未绑定电子标签数量进度条参数
                unBandLabelPro: {
                    all: 0,
                    show: 0,
                    color: '#3BDDEF'
                },
                // 开启报警数量进度条参数
                warnPro: {
                    all: 0,
                    show: 0,
                    color: '#CB65FF'
                },
                tableH: '500',
                dropdownVal: "", // 表格下拉菜单的值
                // 修改框的值
                updateForm: {
                    name: '',
                    tagId: '',
                    personLiable: '',
                    remark: '',
                }
            }
        },
        methods: {
            /**
             * 全选切换和非全选切换
             * @param val
             */
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            // 批量删除行
            batchDel() {
                let ids = []
                this.multipleSelection.forEach((item, val) => {
                    ids.push(item.id)
                })
                if (ids.length === 0) {
                    this.$message.error(this.$msgDictionary.chooseFirst)
                    return
                }
                this.$alert('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    closeOnClickModal: true,
                    confirmButtonClass: 'dialog-big-button',
                }).then(() => {
                    this.$ajax
                        .assets
                        .deleteAssets(ids)
                        .then((res) => {
                            let result = res.data
                            if (result.code === 200) {
                                this.$message.success(this.$msgDictionary.delete.suc)
                                ids.forEach((item, val) => {
                                    this.tableData.splice(item, 1)
                                })
                            } else {
                                this.$message.error(result.msg)
                            }
                        }, () => {
                            this.$message.error(this.$msgDictionary.serviceException)
                        })
                }).catch(() => {

                })
            },
            // 删除行
            deleteRow(index, rows) {
                let id = []
                id.push(rows[index].id)
                this.$alert('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    center: true,
                    closeOnClickModal: true,
                    confirmButtonClass: 'dialog-big-button',
                }).then(() => {
                    this.$ajax.assets
                        .deleteAssets(id)
                        .then((res) => {
                            let result = res.data
                            if (result.code === 200) {
                                this.$message.success(this.$msgDictionary.delete.suc)
                                rows.splice(index, 1)
                            } else {
                                this.$message.error(result.msg)
                            }
                        }, () => {
                            this.$message.error(this.$msgDictionary.serviceException)
                        })
                }).catch(() => {

                })
            },
            /**
             * 得到下拉菜单的值
             */
            getCommand(command) {
                this.dropdownVal = command
            },
            /**
             * 转移设备
             */
            transferHandle(row) {
                let params = {
                    assetsId: row.id,
                    areaId: this.dropdownVal,
                    userId: ""
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .moveAssets(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.getIndex()
                            this.$message.success(this.$msgDictionary.operation.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 报警开关
             */
            alarmSwitch(row) {
                let params = {
                    assetsId: row.id,
                    userId: "",
                    alarmSwitch: row.alarmSwitch
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .alarmSwitch(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.operation.suc)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            /**
             * 修改当前行按钮
             * @param val
             */
            update(val) {
                this.updateForm = val
                this.updateVisible = true
            },
            // 每页显示更改
            pageSizeChange() {
                this.pagSize = this.pageSize * 1
                this.getIndex(this.pageSize * 1, 1)
            },
            // 分页更改
            currentChange(index) {
                this.getIndex(this.pageSize * 1, index)
            },
            /**
             * 修改确定
             */
            updateConfirm() {
                let params = {
                    id: this.updateForm.id,
                    assetsName: this.updateForm.name,
                    tagId: this.updateForm.tagId,
                    personLiable: this.updateForm.personLiable,
                    remark: this.updateForm.remark,
                }
                this.$ajax
                    .assets
                    .updateAssets(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$message.success(this.$msgDictionary.update.suc)
                            this.updateVisible = false
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },

            /**
             * 搜索
             */
            search() {
                if (this.searchParam.trim() === '') {
                    this.getIndex()
                    this.$message.error(this.$msgDictionary.query.emptyInput)
                    return
                }
                let params = {
                    userId: "",
                    pageSize: 10,
                    pageIndex: 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                params.name = this.searchParam.trim()
                this.$ajax
                    .assets
                    .getAssetsByName(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.tableData = result.result.content
                            if(this.tableData.length === 0){
                                this.$message.error(this.$msgDictionary.query.emptyResult)
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            },
            getIndex(pageSize, pageNum) {
                let params = {
                    userId: "",
                    pageSize: pageSize ? pageSize * 1 : 10,
                    pageIndex: pageNum ? pageNum * 1 : 1
                }
                if (localStorage.getItem("user")) {
                    params.userId = JSON.parse(localStorage.getItem("user")).userId
                }
                this.$ajax
                    .assets
                    .getAssets(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            if (result.result) {
                                this.tableData = result.result.assetsInfoPage.content
                                this.pagTotal = result.result.totalAssetNum
                                this.pagSize = params.pageSize * 1
                                this.assetPro.all = result.result.totalAssetNum
                                this.assetPro.show = result.result.totalAssetNum
                                this.bandLabelPro.all = result.result.totalAssetNum
                                this.bandLabelPro.show = result.result.bandTagNum
                                this.unBandLabelPro.all = result.result.totalAssetNum
                                this.unBandLabelPro.show = result.result.notBandTagNum
                                this.warnPro.all = result.result.totalAssetNum
                                this.warnPro.show = result.result.alarmOpenNum
                                // 获取区域列表
                                params.pageSize = undefined
                                this.$ajax
                                    .areas
                                    .getAreas(params)
                                    .then((res) => {
                                        let result = res.data
                                        if (result.code === 200) {
                                            if (result.result) {
                                                this.areaList = result.result.areasInfoDTOS.content
                                            }
                                        } else if (result.code === 408) {
                                            this.$message.error(this.$msgDictionary.loginTimeout)
                                            let timer = setTimeout(() => {
                                                clearTimeout(timer)
                                                this.$router.push({path: '/login'})
                                            }, 1500)
                                        } else {
                                            this.$message.error(result.msg)
                                        }
                                    }, () => {
                                        this.$message.error(this.$msgDictionary.serviceException)
                                    })
                            }
                        } else if (result.code === 408) {
                            this.$message.error(this.$msgDictionary.loginTimeout)
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                this.$router.push({path: '/login'})
                            }, 1500)
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        },
        mounted() {
            let winH = window.screen.height
            this.tableH = winH * 0.44
            this.getIndex()
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/index-head";

    .checkAssets {
        height: 100%;
        .pagination {
            position: fixed;
            bottom: 0.5rem;
            left: 21%;
        }
    }
</style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                
